<template>
  <div class="location">
	  <div class="loading" v-if='loading'>loading</div>
	  <locationHeader 
		@isCancelFun='isCancelFun' @searchClickInFor='searchClickInFor' :cities='cities'>
	  </locationHeader>
	  <locationList :cities='cities' :hotCities='hotCities' :alphabetInfor='alphabetInfor' class="locationList" 
		v-show='isShow' @ContentOneBtn='ContentOneBtn'
		@ContentTwoBtn='ContentTwoBtn' @ContentThreeBtn='ContentThreeBtn'>
	  </locationList>
	  <locationAlphabet :alphabetList='alphabetList' class='locationAlphabet' v-show='isShow' 
		@clickAlphabet='clickAlphabet'>
	  </locationAlphabet>
  </div>
</template>

<script>
	import axios from 'axios'
	import locationHeader from './components/locationHeader'
	import locationList from './components/locationList'
	import locationAlphabet from './components/locationAlphabet'
export default {
  name: 'Home',
  components:{
	  locationHeader,
	  locationList,
	  locationAlphabet
  },
 data(){
	  return{
		  cities:{},
		  hotCities:[],
		  alphabetList:[],
		  isShow:true,
		  alphabetInfor:'',
		  city:'',
		  loading:true
	  }
  },
  methods:{
	  getHomeData(){
		  axios.get("/api/city.json").then(this.getDataSucc)
	  },
	  getDataSucc(res){
		  res=res.data
		  //console.log(res.data)
		  if(res.data){
			  this.loading=false
			  const data=res.data
			  this.cities=data.cities
			  this.hotCities=data.hotCities
			  this.alphabetList=data.alphabetList
		  }
	  },
	  isCancelFun(e){
		  this.isShow = e === "false" ? false : true;
	  },
	  clickAlphabet(e){
		  this.alphabetInfor=e
	  },
	  ContentOneBtn(e){//当前城市名称
		  this.city=e
		  //console.log(this.city)
	  },
	  ContentTwoBtn(e){//热门城市名称
		  this.city=e
		  //console.log(this.city)
	  },
	  ContentThreeBtn(e){//A-Z城市名称
	  	  this.city=e
	  	 // console.log(this.city)
	  },
	  searchClickInFor(e){//搜寻后的城市名称
		  this.city=e
		  //console.log(this.city)
	  }
  },
  watch:{
	  
  },
  mounted(){
	  this.getHomeData()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang='stylus' scoped>
.loading
  position:absolute
  top:7rem
  left:3.5rem
  z-index:1011
  width:1.8rem
  height:.5rem
  opacity:.3
  background:#000
  color:#fff
  text-align:center
</style>
